<template>
    <div class="info-container">
        <div
            v-show="props.data.length === 0"
            style="
                text-align: center;
                width: 100%;
                height: 100px;
                line-height: 100px;
            "
        >
            暂无数据
        </div>
        <div
            class="item"
            v-for="(item, index) in props.data"
            :key="index"
            v-show="props.data.length != 0"
        >
            <div class="item-time">
                {{ new Date(item.createTime).toLocaleString() }}
            </div>
            <div class="point"></div>
            <div class="line" v-if="index + 1 != data.length"></div>
            <div class="tag" v-show="showtag">
                <el-tag type="" v-show="item.type === 0">新增</el-tag>
                <el-tag type="" v-show="item.type === 1">划出</el-tag>
                <el-tag type="danger" v-show="item.type === 2">离职</el-tag>
            </div>
            <div class="info-right">
                <!-- <div class="top">
          <span>{{ item.time }}</span
          >, <span>{{ item.name }}</span
          >-
          <span>{{ item.person }}</span>
        </div> -->
                <div class="bottom">{{ item.operateContent }}</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
interface timelineprops {
    createTime: number
    type: number
    operateContent: string
}
const props = defineProps({
    data: {
        type: Array<timelineprops>,
        default: []
    },
    showtag: {
        default: true
    }
})
</script>

<style lang="scss" scoped>
.info-container {
    .item {
        font-size: 13px;
        color: #666;
        display: flex;
        align-content: center;
        position: relative;
        height: 80px;

        .item-time {
            margin-top: 5px;
            width: 78px;
            text-align: center;
            position: relative;
            height: 80px;
            margin-right: 10px;

            .item-time {
                margin-top: 0px;
                width: 78px;
                text-align: center;
                line-height: 20px;
                color: #000;
            }
        }

        .point {
            width: 12px;
            height: 12px;
            margin-top: 14px;
            background: #ffffff;
            border-radius: 50%;
            border: 2px solid #ccc;
        }

        .line {
            position: absolute;
            left: 95px;
            top: 29px;
            width: 2px;
            height: 70px;
            background: #ccc;
        }

        .tag {
            margin-left: 10px;
            margin-top: 10px;
        }

        .info-right {
            margin-left: 10px;

            .top {
                color: #000000;
                font-weight: bold;

                span:nth-child(2) {
                    margin: 0 6px;
                }

                span:nth-child(3) {
                    margin-left: 6px;
                }
            }

            .bottom {
                width: 450px;
                // background-color: red;
                height: 50px;
                text-overflow: ellipsis;
                box-sizing: border-box;
                padding: 10px;
                overflow: hidden;
                color: rgba(61, 61, 61, 1);
                font-size: 14px;
            }
        }
    }
}
</style>
